<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap 101 Template</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="container" style="padding-top: 10px;">
            <a href="#" class="btn btn-default active" role="button">Link</a>
            <button class="btn btn-default">Button</button>
            <input type="button" class="btn btn-success" value="Success">
            <input type="submit" class="btn btn-default" value="Submit">
            <button class="btn btn-primary disabled">按钮</button>
            <button class="btn btn-primary btn-lg">大按钮</button>
            <button class="btn btn-primary btn-lg btn-block">大的块级按钮</button>
            <button class="btn btn-primary btn-sm btn-block">小的块级按钮</button>
            <button class="btn btn-primary btn-xm">超级小按钮</button>
            <button class="btn btn-primary active">中的块级按钮</button>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Please Input Correct Information</div>
                </div>
                <div class="panel-body">
                    <form action="users" method="post" class="form-horizontal" onsubmit="javascript: console.log($.toJSON($(this).serializeJSON())); return false;">
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="id">Id: </label>
                            <div class="col-sm-10">
                                <p class="form-control-static">002-004-005</p>
                            </div>
                        </div>
                        <div class="form-group has-warning">
                            <label class="col-sm-2 control-label" for="name">Name: </label>
                            <div class="col-sm-10 has-warning">
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                        </div>
                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label" for="email">Email: </label>
                            <div class="col-sm-10 has-feedback">
                                <input type="email" class="col-sm-10 form-control has-feedback" id="email" name="email" placeholder="dzhang@126.com" aria-describedby="inputError2Status">
                                <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                                <span id="emailerror" class="sr-only">(error)</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="birthday">Birthday: </label>
                            <div class="col-sm-10 has-success">
                                <input type="date" class="form-control" id="birthday" name="birthday">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="amount">Amount:</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <div class="input-group-addon">￥</div>
                                    <input type="text" class="form-control" id="amount" name="amount">
                                    <div class="input-group-addon">.00</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label style="width: 100%;">
                                        <input type="checkbox">Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="hobby1">Hobby: </label>
                            </div>
                            <div class="col-sm-10">
                                <label for="hobby1" class="checkbox-inline">
                                    <input type="checkbox" id="hobby1" name="hobby" value="basketball">Basketball</input>
                                </label>
                                <label for="hobby2" class="checkbox-inline">
                                    <input type="checkbox" id="hobby2" name="hobby" value="football">Football</input>
                                </label>
                                <label for="hobby3" class="checkbox-inline">
                                    <input type="checkbox" id="hobby3" name="hobby" value="movie">Movie</input>
                                </label>
                                <label for="hobby4" class="checkbox-inline">
                                    <input type="checkbox" id="hobby4" name="hobby" value="shopping">Shopping</input>
                                </label>
                                <label for="hobby5" class="checkbox-inline">
                                    <input type="checkbox" id="hobby5" name="hobby" value="sing">Sing</input>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="male">Gender: </label>
                            </div>
                            <div class="col-sm-10">
                                <label for="male" class="radio-inline">
                                    <input type="radio" name="gender" id="male" value="male">Male</input>
                                </label>
                                <label for="female" class="radio-inline">
                                    <input type="radio" name="gender" id="female" value="female">Female</input>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="country">Country: </label>
                            </div>
                            <div class="col-sm-10">
                                <select name="country" id="country" class="form-control" multiple>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">
                                <label for="description">Description: </label>
                            </div>
                            <div class="col-sm-10">
                                <textarea name="description" style="resize: vertical;" id="description" cols="30" rows="3" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <input type="submit" value="Submit" class="btn btn-default">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="panel-footer">All Copyright reserver</div>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-info">Left</button>
                <button type="button" class="btn btn-info">Middle</button>
                <button type="button" class="btn btn-info">Right</button>
            </div>
            <p>忧伤的分割线</p>
            <form action="users" method="post" class="form-block">
                <fieldset disabled>
                    <div class="form-group">
                        <label for="name">Name: </label>
                        <input type="text" class="form-control" id="name" name>
                    </div>
                    <div class="form-group">
                        <label for="email">Email: </label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="dzhang@126.com">
                    </div>
                    <div class="form-group">
                        <label for="birthday">Birthday: </label>
                        <input type="date" class="form-control" id="birthday" name="birthday">
                    </div>
                    <div class="form-group">
                        <label for="amount">Amount:</label>
                        <div class="input-group">
                            <div class="input-group-addon">￥</div>
                            <input type="text" class="form-control" id="amount" name="amount">
                            <div class="input-group-addon">.00</div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label style="width: 100%;">
                            <input type="checkbox">Remember Me
                        </label>
                    </div>
                    <input type="submit" value="Submit" class="btn btn-primary">
                </fieldset>
            </form>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover">
                    <caption>User List</caption>
                    <thead>
                        <tr>
                            <th class="active">No</th>
                            <th class="info">Name</th>
                            <th class="success">Email</th>
                            <th class="warning">Birthday</th>
                            <th class="danger">Operations</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="danger">
                            <td>1</td>
                            <td>dzhang</td>
                            <td>dzhang@126.com</td>
                            <td>1987-02-16</td>
                            <td><a href="#">Details</a></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jane</td>
                            <td>jane@126.com</td>
                            <td>1987-06-28</td>
                            <td><a href="#">Details</a></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Jack</td>
                            <td>jack@126.com</td>
                            <td>1987-02-18</td>
                            <td><a href="#">Details</a></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Sunsan</td>
                            <td>sunsan@126.com</td>
                            <td>1987-03-26</td>
                            <td><a href="#">Details</a></td>
                        </tr>
                        <tr class="success">
                            <td>5</td>
                            <td>vivian</td>
                            <td>vivian@126.com</td>
                            <td>1987-01-14</td>
                            <td><a href="#">Details</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h1>你好，世界！</h1>
            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.serializejson.min.js"></script>
        <script src="js/jquery.json.js"></script>
        <script src="js/json2.js"></script>
    </body>

</html>
